<template>
  <!--  收入表 -->
  <div class="projectLibrary">
    <div class="projectLibrary_left">
      <enterpriseTree ref="enterpriseTree" />
    </div>
    <div class="projectLibrary_right">
      <div class="projectLibrary_right_searchWrap">
        <enterpriseSearch ref="enterpriseSearch" />
      </div>

      <div class="projectLibrary_right_tableContent">
        <!-- 表格展示数据区域 -->
        <div id="xTableWrap1" class="main-table-wrap">
          <DynamicTables ref="dynamicTables" :table-data="tableData" :table-header="columnList" :table-loading="tableLoading" />
        </div>
        <!-- 分页 -->
        <div class="commonTable_pagination">
          <div class="commonTable_pagination_right">
            <el-pagination
              background
              :current-page="pageIndex"
              :page-sizes="[50, 100, 150, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <div class="diaLog">
      <enterpriseDialog ref="enterpriseDialog" />
    </div>

  </div>

</template>

<script>
import enterpriseTree from './components/enterpriseTree.vue';
import enterpriseSearch from './components/search.vue';
import enterpriseDialog from './components/dialog.vue';
import DynamicTables from './components/DynamicTables.vue';
import { getHeader, getData } from '@/api/IncomeStatement/index.js';
export default {
  components: {
    enterpriseTree,
    enterpriseSearch,
    enterpriseDialog,
    DynamicTables
  },
  data() {
    return {
      tableData: [],
      columnList: [],
      headerList: [],
      tableLoading: false,
      pageSize: 50,
      pageIndex: 0,
      count: 0

    };
  },
  created() {
    this.getHeaderList();
  },
  methods: {
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.$refs.dynamicTables.startIndex = (this.pageIndex - 1) * this.pageSize;
      this.getData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.$refs.dynamicTables.startIndex = (this.pageIndex - 1) * this.pageSize;
      this.getData();
    },
    getHeaderList() {
      getHeader({
        iVouchId: '8090'
      }).then(res => {
        if (res.success) {
          this.headerList = res.data.headerList;
          this.columnList = res.data.columnList.filter(item => item.bHide === 0);
        }
      });
    },
    getData() {
      this.tableLoading = true;
      let filterList1 = [];
      if (this.$refs.enterpriseTree.enterpriseGuid === 'all') {
        filterList1 = [];
      } else {
        filterList1 = [{
          value: this.$refs.enterpriseTree.enterpriseGuid,
          col: 'ENTERPRISE_GUID',
          symbol: 'in'
        }];
      }
      this.$refs.enterpriseSearch.filterList.map(o => {
        filterList1.push({
          value: o.formType === '0' ? o.value !== '' ? o.value.split(' ')[1] : o.value : o.value,
          col: o.col,
          symbol: o.symbol
        });
      });
      getData({
        columnList: this.columnList,
        filterList: filterList1,
        headerList: this.headerList,
        moneyType: '1',
        year: localStorage.getItem('chooseYear'),
        month: '',
        orderBy: '',
        pageType: '1',
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1
      }).then(res => {
        setTimeout(() => {
          this.tableLoading = false;
        }, 500);
        if (res.success) {
          this.tableData = res.data === '' ? [] : res.data;
          this.count = res.total;
        } else {
          this.tableData = [];
          this.count = 0;
        }
      });
    }
  }

};
</script>

<style lang='scss' scoped>
.projectLibrary {
  display: flex;
}
.projectLibrary_left {
  width: 18%;
  padding: 10px;
}
.projectLibrary_right {
  width: 82%;
  padding: 10px 0px;
}
.projectLibrary_right_searchWrap {
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}
.projectLibrary_right_tableContent {
  margin-top: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}
.commonTable-pagination {
  margin-bottom: 10px;
  text-align: right
}
.fontStyle {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  text-align: center
}
.commonTable_pagination{
  display: flex;
  margin-top: 5px
}
.commonTable_pagination_left{
  flex:1
}
.commonTable_pagination_right{
  flex:1;
  text-align: right
}
#xTableWrap1 /deep/ .vxe-table .vxe-body--column.col--ellipsis, .vxe-table.vxe-editable .vxe-body--column, .vxe-table .vxe-footer--column.col--ellipsis, .vxe-table .vxe-header--column.col--ellipsis {
    height: 30px !important;
}
.tabsContainer /deep/ .el-tree-node__content>.el-tree-node__expand-icon {
    padding: 6px;
    display: none !important;
}
.tabsContainer /deep/ .el-tree {
    position: relative;
    cursor: default;
    background: #fff;
    color: #606266;
    height: calc(65vh) !important;
    overflow-y: auto !important;
}
</style>
